<template>
  <div class="profile-list">
    <div class="profile-list-item">
      <icon><div slot="img"></div></icon>
      <span>我的消息</span>
    </div>
    <div class="profile-list-item">
      <icon><div slot="img"></div></icon>
      <span>积分商城</span>
    </div>
    <div class="profile-list-item">
      <icon><div slot="img"></div></icon>
      <span style="border-bottom: 0">会员卡</span>
    </div>
    <div class="line"></div>
    <div class="profile-list-item">
      <icon><div slot="img"></div></icon>
      <span>我的购物车</span>
    </div>
    <div class="profile-list-item">
      <icon><div slot="img"></div></icon>
      <span>点赞购物APP</span>
    </div>
  </div>
</template>

<script>
import Icon from "components/common/icon/Icon.vue";
export default {
  components: { Icon },
  name: "profileList",
};
</script>

<style scoped>
@font-face {
  font-family: "icomoon";
  src: url("~assets/fonts/icomoon.eot?kmnl4i");
  src: url("~assets/fonts/icomoon.eot?kmnl4i#iefix") format("embedded-opentype"),
    url("~assets/fonts/icomoon.ttf?kmnl4i") format("truetype"),
    url("~assets/fonts/icomoon.woff?kmnl4i") format("woff"),
    url("~assets/fonts/icomoon.svg?kmnl4i#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.profile-list {
  width: 100%;
}

.profile-list-item {
  line-height: 45px;
  display: flex;
  align-items: center;
  height: 45px;
  padding-left: 20px;
}

.profile-list-item .profile-list-icon {
  font-size: 24px;
  display: inline-block;
  margin-right: 7px;
}

.profile-list-item span {
  font-size: 16px;
  display: inline-block;
  width: 100%;
  color: #333333;
  border-bottom: 1px solid #dddddd;
}

.line {
  width: 100%;
  height: 10px;
  background-color: #eeeeee;
}
</style>
